import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { theme } from '../../theme';

interface WorkItemProps {
  icon: string;
  label: string;
  onPress?: () => void;
}

function WorkItem({ icon, label, onPress }: WorkItemProps) {
  return (
    <TouchableOpacity style={styles.gridItem} onPress={onPress}>
      <Ionicons name={icon as any} size={24} color={theme.colors.primary} />
      <Text style={styles.gridItemText}>{label}</Text>
    </TouchableOpacity>
  );
}

interface TaskItemProps {
  title: string;
  deadline: string;
  progress: number;
  status: 'pending' | 'inProgress' | 'completed';
}

function TaskItem({ title, deadline, progress, status }: TaskItemProps) {
  const statusColors = {
    pending: theme.colors.status.pending,
    inProgress: theme.colors.status.inProgress,
    completed: theme.colors.status.completed,
  };

  const statusText = {
    pending: '待处理',
    inProgress: '进行中',
    completed: '已完成',
  };

  return (
    <View style={styles.taskCard}>
      <View style={styles.taskHeader}>
        <View style={styles.taskIconContainer}>
          <Ionicons name="clipboard-outline" size={20} color={theme.colors.primary} />
        </View>
        <View style={styles.taskContent}>
          <Text style={styles.taskTitle}>{title}</Text>
          <Text style={styles.taskDeadline}>截止日期: {deadline}</Text>
        </View>
        <View style={[styles.taskStatus, { backgroundColor: statusColors[status] }]}>
          <Text style={styles.taskStatusText}>{statusText[status]}</Text>
        </View>
      </View>
      <View style={styles.progressContainer}>
        <View style={styles.progressBar}>
          <View 
            style={[styles.progressFill, { width: `${progress}%`, backgroundColor: statusColors[status] }]} 
          />
        </View>
        <Text style={styles.progressText}>{progress}%</Text>
      </View>
    </View>
  );
}

export default function WorkScreen() {
  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      {/* Grid Menu */}
      <View style={styles.gridContainer}>
        <WorkItem icon="clipboard" label="日志管理" />
        <WorkItem icon="calendar" label="工作计划" />
        <WorkItem icon="mail" label="内部邮件" />
        <WorkItem icon="people" label="通讯录" />
        <WorkItem icon="location" label="工作签到" />
        <WorkItem icon="warning" label="事件管理" />
        <WorkItem icon="map" label="网格巡查" />
        <WorkItem icon="chatbox" label="信访管理" />
      </View>

      {/* Tasks Section */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>待办任务</Text>
        <TaskItem 
          title="东湖社区人口信息采集"
          deadline="2023-06-20"
          progress={60}
          status="inProgress"
        />
        <TaskItem 
          title="安全隐患排查"
          deadline="2023-06-18"
          progress={30}
          status="inProgress"
        />
      </View>

      {/* Work Log Section */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>今日日志</Text>
        <View style={styles.logCard}>
          <Text style={styles.logLabel}>工作日志</Text>
          <View style={styles.logInput}>
            <Text style={styles.logPlaceholder}>请输入今日工作内容...</Text>
          </View>
          <View style={styles.logFooter}>
            <Text style={styles.logStatus}>今日已完成任务：2/8</Text>
            <TouchableOpacity style={styles.submitButton}>
              <Text style={styles.submitButtonText}>提交日志</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>

      {/* Recent Inspections */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>最近巡查</Text>
        <View style={styles.inspectionCard}>
          <TouchableOpacity style={styles.inspectionItem}>
            <View style={styles.inspectionIconContainer}>
              <Ionicons name="map-outline" size={20} color={theme.colors.primary} />
            </View>
            <View style={styles.inspectionContent}>
              <Text style={styles.inspectionTitle}>东湖社区安全巡查</Text>
              <Text style={styles.inspectionDate}>2023-06-15 完成</Text>
            </View>
            <Ionicons name="chevron-forward" size={20} color={theme.colors.text.tertiary} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.inspectionItem}>
            <View style={styles.inspectionIconContainer}>
              <Ionicons name="map-outline" size={20} color={theme.colors.primary} />
            </View>
            <View style={styles.inspectionContent}>
              <Text style={styles.inspectionTitle}>农村环境卫生巡查</Text>
              <Text style={styles.inspectionDate}>2023-06-12 完成</Text>
            </View>
            <Ionicons name="chevron-forward" size={20} color={theme.colors.text.tertiary} />
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.default,
  },
  gridContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 12,
    gap: 12,
  },
  gridItem: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
    width: (Platform.OS === 'web' ? 'calc(25% - 9px)' : '22%'),
    aspectRatio: 1,
    ...theme.shadows,
  },
  gridItemText: {
    fontSize: 14,
    color: theme.colors.text.primary,
    marginTop: 8,
    textAlign: 'center',
  },
  section: {
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: theme.colors.text.primary,
    marginBottom: 12,
  },
  taskCard: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    ...theme.shadows,
  },
  taskHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  taskIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: theme.colors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  taskContent: {
    flex: 1,
  },
  taskTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: theme.colors.text.primary,
    marginBottom: 4,
  },
  taskDeadline: {
    fontSize: 12,
    color: theme.colors.text.secondary,
  },
  taskStatus: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  taskStatusText: {
    fontSize: 12,
    color: theme.colors.white,
  },
  progressContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  progressBar: {
    flex: 1,
    height: 4,
    backgroundColor: theme.colors.border.light,
    borderRadius: 2,
    marginRight: 8,
  },
  progressFill: {
    height: '100%',
    borderRadius: 2,
  },
  progressText: {
    fontSize: 12,
    color: theme.colors.text.secondary,
    width: 40,
    textAlign: 'right',
  },
  logCard: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    padding: 16,
    ...theme.shadows,
  },
  logLabel: {
    fontSize: 14,
    color: theme.colors.text.secondary,
    marginBottom: 8,
  },
  logInput: {
    height: 100,
    backgroundColor: theme.colors.background.default,
    borderRadius: 8,
    padding: 12,
    marginBottom: 12,
  },
  logPlaceholder: {
    color: theme.colors.text.tertiary,
    fontSize: 14,
  },
  logFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  logStatus: {
    fontSize: 12,
    color: theme.colors.text.secondary,
  },
  submitButton: {
    backgroundColor: theme.colors.primary,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 4,
  },
  submitButtonText: {
    color: theme.colors.white,
    fontSize: 12,
  },
  inspectionCard: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    ...theme.shadows,
  },
  inspectionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border.light,
  },
  inspectionIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: theme.colors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  inspectionContent: {
    flex: 1,
  },
  inspectionTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: theme.colors.text.primary,
    marginBottom: 4,
  },
  inspectionDate: {
    fontSize: 12,
    color: theme.colors.text.secondary,
  },
});